<template>
  <a-config-provider :locale="locale">
    <div class="app-container">
      <!-- 简单导航 -->
      <div class="nav-bar">
        <a-menu mode="horizontal" :selected-keys="[currentRoute]">
          <a-menu-item
            key="/node-management"
            @click="navigateTo('/node-management')"
          >
            分布式节点管理
          </a-menu-item>
        </a-menu>
      </div>

      <!-- 页面内容 -->
      <div class="page-content">
        <router-view></router-view>
      </div>
    </div>
  </a-config-provider>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import { useStore } from "vuex";

const locale = zhCN;
const router = useRouter();
const route = useRoute();

const currentRoute = computed(() => route.path);

const navigateTo = (path: string) => {
  if (window.__MicroAPP__) {
    router.push(window.__MicroAPP__.help.getPath(path));
  } else {
    router.push(path);
  }
};

const toRouter = (path: string) => {
  router.push(window.__MicroAPP__.help.getPath(path));
};

const microApp = window.__MicroAPP__;

if (microApp) {
  const props = microApp.basic.getCurrentAppProps(window);
  if (props) {
    if (props.path) {
      toRouter(props.path);
    }
    microApp.bus.onRouterChanged({
      appName: props.name,
      callback: ({ path }: any) => {
        toRouter(path);
      },
    });
  }
}
</script>

<style>
#vite-ai-app-demo {
  height: 100%;
}

.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.nav-bar {
  background: white;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 24px;
}

.page-content {
  flex: 1;
  overflow: auto;
}

@media (max-width: 768px) {
  .nav-bar {
    padding: 0 16px;
  }
}
</style>
